<template>
  <div class="phone">
    <div class="phone-body">
      <div class="body-header">
        <h2 class="title">家电</h2>
        <div class="all">
          <ul>
            <li :class="{'liActive' : item.type === selected}" v-for="(item,index) in all" :key="index" @mouseenter="selected=item.type">
              {{item.name}}
            </li>
          </ul>
        </div>
      </div>
      <div class="body-main">
        <div class="main-left">
          <div v-for="(item,index) in leftList" :key="index">
            <router-link :to="'/GoodsList/'+item.id">
              <img :src="item.imgUrl" alt="">
            </router-link>
          </div>
        </div>
        <div class="main-right">
          <div class="item" v-for="(item,index) in rightList[selected]" :key="index" @mouseenter="itemIndex = index" @mouseleave="itemIndex = ''">
            <div class="item-body">
              <p class="flag" :class="{'flagActive1': item.flag == '新品','flagActive2': (item.flag != '新品' && item.flag != '')}" v-cloak>{{item.flag}}</p>
              <router-link :to="'/GoodsList/'+item.id">
                <img :src="item.imgUrl" alt="">
              </router-link>
              <p class="title" v-cloak>{{item.title}}</p>
              <p class="desc" v-cloak>{{item.desc}}</p>
              <div class="priceDiv">
                <p class="price">{{item.price}}</p>
                <del>
                  <p class="oldPrice" :class="{'oldPriceActive':(item.oldProce !='')}">{{item.oldProce}}</p>
                </del>
              </div>
            </div>
          </div>
          <div class="item-last">
            <div class="item-last-body1">
              <div class="body body1">
                <div class="body1-left">
                  <router-link class="title" :to="'/GoodsList/'+rightLastInfo[selected].id">{{rightLastInfo[selected].title}}</router-link>
                  <p class="price">{{rightLastInfo[selected].price}}</p>
                </div>
                <div class="body1-right">
                  <router-link :to="'/GoodsList/'+rightLastInfo[selected].id">
                    <img :src="rightLastInfo[selected].imgUrl" alt="">
                  </router-link>
                </div>
              </div>
            </div>
            <div class="item-last-body2">
              <div class="body body2">
                <div class="body2-left">
                  <router-link class="more" to="/GoodsList" target="_blank">浏览更多</router-link>
                  <p class="name">{{rightLastInfo[selected].name}}</p>
                </div>
                <div class="body2-right">
                  <router-link to="/GoodsList" target="_blank">
                    <i class="el-icon-al-jiantouyou"></i>
                  </router-link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      itemIndex: '',
      selected: 'remen',
      all: [
        { name: '热门', type: 'remen' },
        { name: '电视影音', type: 'dianshiyingyin' }
      ],
      leftList: [
        { imgUrl: '//i1.mifile.cn/a4/xmad_15608266264545_qWIRv.jpg', id: '1' },
        { imgUrl: '//i1.mifile.cn/a4/xmad_15608266614476_wdGNy.jpg', id: '2' }
      ],
      rightList: {
        remen: [
          { imgUrl: '//i1.mifile.cn/a1/pms_1500287084.72131750!220x220.jpg', id: '3', title: '小米电视4A 32英寸', desc: '64位四核处理器 / 1GB+4GB大内存', price: '769元', oldProce: '799元', flag: '减 30 元', pingjia: '很满意，非常喜欢，开心！', author: '童童' },
          { imgUrl: '//i1.mifile.cn/a1/pms_1535103027.24861415!220x220.jpg', id: '4', title: '小米电视4A 65英寸', desc: '', price: '2999元', oldProce: '', flag: '', pingjia: '满意，品质好，高清。使用很方便。超大，性价比高', author: '嘎嘎鹭' },
          { imgUrl: '//i1.mifile.cn/a4/xmad_15350951136177_QUuVm.png', id: '5', title: '15.6"笔记本 i5 4G MX110', desc: '', price: '4199元', oldProce: '', flag: '新品', pingjia: '物流很快的，笔记本很流畅，体验超级棒，显示屏很清晰', author: '小小快乐' },
          { imgUrl: '//i1.mifile.cn/a1/pms_1524636075.71677607!220x220.jpg', id: '6', title: '13.3"小米笔记本Air 四核i7 8G 256G MX150 银色', desc: '', price: '5999元', oldProce: '', flag: '', pingjia: '轻薄完美，深空灰超帅！', author: '1*215219' },
          { imgUrl: '//i1.mifile.cn/a1/pms_1560161251.21862332!220x220.jpg', id: '7', title: '米家互联网洗烘一体机 Pro 10kg', desc: '', price: '2999元', oldProce: '', flag: '新品', pingjia: '', author: '' },
          { imgUrl: '//i1.mifile.cn/a1/pms_1545286017.38639954!220x220.jpg', id: '8', title: '米家互联网空调（一级能效）', desc: '', price: '2399元', oldProce: '2699元', flag: '减 300 元', pingjia: '空调很好，杠杠滴，颜值杠杠滴，帅呆了', author: '星月的辉歌' },
          { imgUrl: '//i1.mifile.cn/a1/pms_1560232653.29021311!220x220.jpg', id: '9', title: '烟灶套装（天然气）', desc: '吸油,燃气灶,油烟机,抽烟机,灶具,套装', price: '1999元', oldProce: '2298元', flag: '新品', pingjia: '宝贝超级好。吸力特大', author: '吴文栋' }
        ],
        // 下面数据懒得搞了
        dianshiyingyin: [
          { imgUrl: '//i1.mifile.cn/a1/pms_1555935546.09711490!220x220.jpg', id: '10', title: '小米壁画电视 65英寸', desc: '', price: '6999元', oldProce: '', flag: '新品', pingjia: '不错，从购买，到安装完毕。三天好了。', author: '226*****75' },
          { imgUrl: '//i1.mifile.cn/a1/pms_1555935546.09711490!220x220.jpg', id: '1', title: '下面数据懒得搞了', desc: '布局都搞完了', price: '', oldProce: '', flag: '', pingjia: '', author: '' },
          { imgUrl: '//i1.mifile.cn/a1/pms_1555935546.09711490!220x220.jpg', id: '2', title: '下面数据懒得搞了', desc: '布局都搞完了', price: '', oldProce: '', flag: '', pingjia: '', author: '' },
          { imgUrl: '//i1.mifile.cn/a1/pms_1555935546.09711490!220x220.jpg', id: '3', title: '下面数据懒得搞了', desc: '布局都搞完了', price: '', oldProce: '', flag: '', pingjia: '', author: '' },
          { imgUrl: '//i1.mifile.cn/a1/pms_1555935546.09711490!220x220.jpg', id: '4', title: '下面数据懒得搞了', desc: '布局都搞完了', price: '', oldProce: '', flag: '', pingjia: '', author: '' },
          { imgUrl: '//i1.mifile.cn/a1/pms_1555935546.09711490!220x220.jpg', id: '5', title: '下面数据懒得搞了', desc: '布局都搞完了', price: '', oldProce: '', flag: '', pingjia: '', author: '' },
          { imgUrl: '//i1.mifile.cn/a1/pms_1555935546.09711490!220x220.jpg', id: '6', title: '下面数据懒得搞了', desc: '布局都搞完了', price: '', oldProce: '', flag: '', pingjia: '', author: '' }
        ]
      },

      rightLastInfo: {
        remen: { name: '热门', imgUrl: '//i1.mifile.cn/a1/pms_1559644554.04136931!220x220.jpg', id: '7', title: '米家电烤箱', price: '299元' },
        dianshiyingyin: { name: '电视影音', imgUrl: '//i1.mifile.cn/a1/pms_1555935546.09711490!220x220.jpg', href: '8', title: '', price: '' }
      }
    }
  },
  methods: {
    example () {

    }
  }
}
</script>

<style lang="stylus" scoped>
.phone
  width 1226px
  margin 0 auto
  .phone-body
    width 100%
    .body-header
      height 58px
      display flex
      justify-content space-between
      align-items center
      .title
        font-size 22px
        font-weight 200
      .all
        width auto
        ul
          display flex
          justify-content space-between
          font-size 16px
          li
            cursor pointer
            height 21px
            text-align center
            margin-left 20px
          .liActive
            color #ff6700
            border-bottom 2px solid #ff6700
    .body-main
      width 100%
      height 614px
      display flex
      justify-content space-between
      .main-left
        display flex
        flex-direction column
        justify-content space-between
        div
          width 234px
          height 300px
          transition all 0.2s linear
          z-index 1
          &:hover
            box-shadow 0 15px 30px rgba(0, 0, 0, 0.1)
            transform translate3d(0, -2px, 0)
          a
            img
              width 234px
              height 300px
      .main-right
        width 992px
        height 614px
        display flex
        flex-flow wrap
        justify-content center
        align-content space-between
        .item
          position relative
          background #fff
          width 234px
          height 300px
          margin-left 14px
          transition all 0.2s linear
          z-index 1
          display flex
          flex-direction column
          &:hover
            box-shadow 0 15px 30px rgba(0, 0, 0, 0.1)
            transform translate3d(0, -2px, 0)
            .pingjiaDiv
              height 80px
          .item-body
            width 234px
            height 265px
            display flex
            flex-direction column
            align-items center
            justify-content space-between
            .flag
              color #fff
              width 64px
              height 20px
              font-size 12px
              line-height 20px
              z-index 5
              text-align center
            .flagActive1
              background-color #83c44e
            .flagActive2
              background-color #e53935
            a
              transform translateY(-10px)
              img
                width 160px
                height 160px
            .title
              width 200px
              font-size 14px
              font-weight 400
              text-align center
              cursor pointer
              text-overflow ellipsis
              white-space nowrap
              overflow hidden
            .desc
              height 18px
              font-size 12px
              text-align center
              white-space nowrap
              color #b0b0b0
            .priceDiv
              font-size 14px
              display flex
              justify-content space-between
              .price
                color #ff6700
              del
                color #b0b0b0
                .oldPriceActive
                  margin-left 4px
          .pingjiaDiv
            position absolute
            width 234px
            height 0px
            z-index 6
            background #ff6700
            bottom 0
            .pingjiaDiv-body
              padding 8px 30px
              font-size 12px
              width 175px
              height 60px
              .pingjia
                margin-bottom 5px
                color #fff
                line-height 18px
              .author
                color rgba(255, 255, 255, 0.6)
                text-overflow ellipsis
                white-space nowrap
                overflow hidden
        .item-last
          width 234px
          height 300px
          margin-left 14px
          display flex
          flex-direction column
          justify-content space-between
          .item-last-body1, .item-last-body2
            width 234px
            height 143px
            transition all 0.2s linear
            z-index 1
            background #fff
            display flex
            justify-content center
            align-items center
            &:hover
              box-shadow 0 15px 30px rgba(0, 0, 0, 0.1)
              transform translate3d(0, -2px, 0)
            .body
              width 180px
              height 80px
              display flex
              justify-content space-between
              align-items center
          .item-last-body1
            .body1
              .body1-left
                height 40px
                display flex
                justify-content space-between
                flex-direction column
                transform translateY(-10px)
                .title
                  font-size 14px
                  font-weight 400
                .price
                  font-size 14px
                  color #ff6700
              .body1-right
                width 80px
                height 80px
                a
                  img
                    width 80px
                    height 80px
          .item-last-body2
            .body2
              .body2-left
                height 40px
                display flex
                justify-content space-between
                flex-direction column
                .more
                  font-size 18px
                  color #333
                .name
                  font-size 12px
                  color #757575
              .body2-right
                width 80px
                height 80px
                display flex
                justify-content center
                align-items center
                a
                  i
                    font-size 48px
                    color #ff6700
</style>
